<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <table id="munu-table" class="layui-table" lay-filter="munu-table" style="margin: 0px"></table>
        <div style="text-align: center">
            <button id="ok" type="button" class="layui-btn layui-btn-normal">确定</button>
        </div>
    </div>
</div>

<script type="text/html" id="icon">
    <i class="{{ d.icon }}"></i>
</script>

<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','treeTable'], function () {
        var $ = layui.jquery,
            form = layui.form,
            treeTable = layui.treeTable;

        //角色id
        var roleId = window.roleId;

        // 渲染表格
        var menutTreeTable = treeTable.render({
            elem: '#munu-table',
            tree: {
                iconIndex: 1,  // 折叠图标显示在第几列
                isPidData:false
            },
            cols: [
                //{type: 'numbers'},
                {type: 'checkbox'},
                {field: 'id', title: 'ID'},
                {field: 'title', title: '菜单名称'},
                {field: 'code', title: '菜单编号'},
                {field: 'icon', title: '菜单图标',templet:'#icon'}
            ],
            reqData: function(data, callback) {
                // 在这里写ajax请求，通过callback方法回调数据
                $.get('../../menu/tree', function (data) {
                    callback(data);  // 参数是数组类型

                    $.get('../../role/selectMenuByRoleId?roleId=' + roleId, function (data) {
                        var assignMenuArray = new Array();
                        for (var i = 0; i < data.length; i++){
                            var row = data[i];
                            assignMenuArray.push(row.id);
                        }

                        //设置选中
                        menutTreeTable.setChecked(assignMenuArray);
                    });

                });
            }
        });


        $("#ok").click(function () {
            //var checkStatus = table.checkStatus('currentTableId')
            var data = menutTreeTable.checkStatus();

            if (data.length == 0){
                layer.msg("请选择菜单");
                return;
            }

            var menuIdArray = new Array();
            for (var i = 0; i<data.length;i++ ){
                //菜单id
                menuIdArray.push(data[i].id);
            }

            $.post('../../role/assignMenu',{roleId:roleId,menuIds:JSON.stringify(menuIdArray)},function (data) {
                //关闭窗口
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);

                parent.layer.msg('权限分配成功');

            },'json');

        });


    });
</script>
<script>

</script>

</body>
</html>